<template>
    <div class="user">
        <el-container>

            <el-header>
                <div style="padding-top: 50px;">

                    <div style="float: left;height: 40px;padding-left: 40px">
                        <div style="float: left;padding-right: 12px">
                            <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-data-mishop/f790b51a76afd7b41522048fa779d69d.jpg"
                                 alt="" width="150" height="150" class="img_1">
                        </div>
                        <div style="float: right;padding-top: 10px;padding-left: 15px">
                            <h2 v-show="xianshi_1">{{ username }}</h2>
                            <h2 v-show="xianshi_2">{{ email }}</h2>
                            <p
                                    v-if="welcome=(ho<9?'早上好~':ho<12?'上午好~':ho<17?'下午好~':'晚上好~')">
                                {{ welcome }}
                            </p>

                            <a href="" style="color: #FF6700">修改个人信息 ></a>
                        </div>
                    </div>
                    <div style="float: right;padding-right: 180px;padding-top: 15px">
                        <ul>
                            <li>
                                账户安全 ：<span style="color: #FF6700">普通</span>
                            </li>
                            <li style="padding-top: 8px">
                                绑定邮箱 ： <span>{{ email }}</span>
                            </li>
                        </ul>
                    </div>

                </div>


            </el-header>


            <el-main>
                <div style="margin-top: 180px">
                    <hr>
                </div>
                <div class="div1">
                    <table>
                        <tr>
                            <td>
                                <div style="float: left">
                                    <img src="https://s01.mifile.cn/i/user/portal-icon-1.png" alt="">
                                </div>
                                <div style="float: right;padding-top: 20px;">
                                    待支付的订单：<span style="color: #FF6700">{{ number }}</span>
                                    <br>
                                    <br>
                                    <a href="">查看待支付的订单 ></a>
                                </div>
                            </td>
                            <td>
                                <div style="float: left">
                                    <img src="https://s01.mifile.cn/i/user/portal-icon-2.png" alt="">
                                </div>
                                <div style="float: right;padding-top: 20px;padding-left: 10px ">
                                    待收货的订单：<span style="color: #FF6700">{{ number }}</span>
                                    <br>
                                    <br>
                                    <a href="">查看收货订单 ></a>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div style="float: left">
                                    <img src="https://s01.mifile.cn/i/user/portal-icon-3.png" alt="">
                                </div>
                                <div style="float: right;padding-top: 20px;padding-left: 20px ">
                                    待评价商品数：<span style="color: #FF6700">{{ number }}</span>
                                    <br>
                                    <br>
                                    <a href="">查看待评价商品 ></a>
                                </div>
                            </td>
                            <td>
                                <div style="float: left">
                                    <img src="https://s01.mifile.cn/i/user/portal-icon-4.png" alt="">
                                </div>
                                <div style="float: right;padding-top: 20px;padding-left: 20px ">
                                    喜欢的商品：<span style="color: #FF6700">{{ number }}</span>
                                    <br>
                                    <br>
                                    <a href="">查看喜欢的商品 ></a>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>

            </el-main>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "User",
        data() {
            return {
                username: this.$store.getters.userName,
                number: 0,
                email: this.$store.getters.email,
                xianshi_1: true,
                xianshi_2: false,
                welcome: "hello",
                ho: new Date().getHours(),
            }
        },
        methods: {
            xianshi() {
                if (this.$store.getters.userName != null) {
                    this.xianshi_1 = true
                    this.xianshi_2 = false
                } else {
                    this.xianshi_1 = false
                    this.xianshi_2 = true
                }
            },
        },
        created() {
            this.xianshi()
            // this.hello()
        }
    }
</script>

<style scoped>
    #ul_1 a {
        text-decoration: none;
    }

    li {
        list-style: none;
    }

    .user {
        width: 978px;
        float: left;
        margin-left: 14px;
        min-height: 1px;
        background-color: #fff;
    }

    .img_1 {
        padding: 4px;
        border: 1px solid #e0e0e0;
        border-radius: 150px;
    }

    hr {
        border: none;
        border-bottom: 1px solid #DaDaDa;
        height: 1px;
        -webkit-transform: scaleY(0.5);
        -webkit-transform-origin: 0 0;
    }

    .div1 table tr td {
        width: 300px;
        padding: 30px 55px;
        font-size: 18px;
    }

    .div1 table tr td a {
        color: #757575;
    }

    .div1 a:hover {
        color: #FF6700;
    }
</style>



